﻿<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="renderer" content="webkit" />
	    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
        <title>iNEWU 爱牛油 - 在线观看免费正版高清亚洲电视剧、电影、综艺、动漫 - 独家韩剧、陆剧、泰剧 </title>
        <link href="favicon.ico" rel="shortcut icon">
	    <script src="js/common/axios.min.js"></script>
        <script src="js/common/vue.js"></script>
        <script src="js/common/template.js"></script>
        <script src="js/common/vue-resource.js"></script>
        <script src="js/common/httpVueLoader.js"></script>
        <link rel="stylesheet" href="css/common/swiper.css">
        <link rel="stylesheet" href="css/common/base.css">
        <link rel="stylesheet" href="css/common/media.css">
        <link rel="stylesheet" href="css/play.css">
        <link rel="stylesheet" href="css/play-mobile.css">
        <script src="https://cdn.tailwindcss.com"></script>
        <!-- 引入hls.js库 -->
        <!-- <script src="https://cdn.bootcdn.net/ajax/libs/hls.js/1.4.10/hls.min.js"></script> -->
        <!-- <script src="js/hls.min.js"></script> -->
         <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
        <style type="text/css">
            [v-cloak]{
              display: none;
            }
        </style>
    </head>
    <body>
        <div id="contn">
            <v-header></v-header>
            <v-main @call-share="share" @call-add-notice="addNotice"></v-main>
            <v-footer></v-footer>
            <v-notice ref="noticeRef"></v-notice>
            <v-side></v-side>
            <v-share ref="shareRef" @call-add-notice="addNotice"></v-share>
        </div>
        <template id="vMain">
            <main v-cloak>
                <div class="play-box fluid">
                    <div class="box">
                        <div class="lft">
                            <div class="video-contn mid">
                                <div class="video-box fill"
                                :class="[
                                    {paused:!playingVideoState.playing},
                                    {muted:playingVideoState.muted},
                                    ]">
                                    <!-- muted loop autoplay  -->
                                    <video src="" muted
                                    id="videoPlayer" class="fill" @click="hdlVidClick"
                                    @mousemove="hdlShowControl"
                                    ></video>
                                    <div class="series-name noTouch">{{info.name}} 第{{sereisInd + 1}}集</div>
                                    <div class="status hvc mid r50 noTouch" :class="currStatusClass" @click="hdlPause">
                                        <div class="dc notransition play">
                                            <img src="img/common/triangle3.png">
                                            <img src="img/play/pause2.png">
                                        </div>
                                        <div class="dc notransition fast">
                                            <img src="img/play/next10-2.png">
                                            <img src="img/play/prev10-2.png">
                                        </div>
                                        <div class="sound fill">
                                            <div class="flex flex-align-items hvc">
                                                <div class="dc notransition">
                                                    <img src="img/play/volume2.png">
                                                    <img src="img/play/volume-mute2.png">
                                                </div>  
                                                <p>{{playingVideoState.volume}}%</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="controls-box noSelect">
                                        <div class="jump-txt flex flex-align-items">
                                            跳过片头片尾功能已{{autoJumpStart?'开启':'关闭'}}<p class="close cursor" @click="jumpTxtHide"></p>
                                        </div>
                                        <div class="progress-box"
                                        @mouseenter="hdlEnter($event)"
                                        @mousemove="hdlMove($event)"
                                        @mousedown="progressDown($event)" 
                                        @mouseup="progressUp($event)">
                                            <div class="progress cursor">
                                                <div class="current" ref="progressRef" :style="{width:playingPercent + '%'}">
                                                    <p class="circle"></p>
                                                </div>
                                                <div class="light-line" ></div>
                                            </div>
                                        </div>
                                        <div class="progress-box mobile"
                                         @touchstart="handleTouchStart"
                                        @touchmove="handleTouchMove"
                                        @touchend="handleTouchEnd">
                                            <div class="progress cursor">
                                                <div class="current" ref="progressMobileRef" :style="{width:playingPercent + '%'}">
                                                    <p class="circle"></p>
                                                </div>
                                                <div class="light-line" ></div>
                                            </div>
                                        </div>
                                        <div class="controls flex flex-between">
                                            <div class="running flex flex-align-items">
                                                <div class="btn play hbc special-btn" @click="hdlPause" :class="{transActive:!playingVideoState.playing}">
                                                    <div class="hbc notransition">
                                                        <img src="img/common/triangle1.png">
                                                        <img src="img/common/triangle2.png">
                                                    </div>
                                                    <div class="hbc hvc notransition">
                                                        <img src="img/play/pause.png">
                                                        <img src="img/play/pause1.png">
                                                    </div>
                                                </div>
                                                <div class="btn prev10" @click="prevOrNext('prev')">
                                                    <div class="hbc notransition">
                                                        <img src="img/play/prev10.png">
                                                        <img src="img/play/prev10-1.png">
                                                    </div>
                                                </div>
                                                <div class="btn next10" @click="prevOrNext('next')">
                                                    <div class="hbc notransition">
                                                        <img src="img/play/next10.png">
                                                        <img src="img/play/next10-1.png">
                                                    </div>
                                                </div>
                                                <div class="btn jump">
                                                    <div class="hbc notransition">
                                                        <img src="img/play/jump.png">
                                                        <img src="img/play/jump-1.png">
                                                    </div>
                                                </div>
                                                <p class="time">
                                                    <span>{{formatTime(playingVideoState.currentTime)}}</span>
                                                    <span> / </span>
                                                    <span>{{formatTime(playingVideoState.duration)}}</span>
                                                </p>
                                            </div>
                                            <div class="other flex flex-align-items">
                                                <div class="btn turn pop-parent" @click="jumpStart" @mouseleave="jumpLeave">
                                                    <div class="switch" :class="{active:autoJumpStart}">
                                                        <div class="circle mid r50 vc">
                                                            <div class="dc notransition hvc">
                                                                <img src="img/play/fast.png">
                                                                <img src="img/play/fast1.png">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="pop hc">点击关闭跳过片头片尾功能</div>
                                                </div>
                                                <div class="btn txt quality pop-parent expandHover">
                                                    <p class="curr">{{quality}}</p>
                                                    <div class="pop hc">
                                                        <div class="list">
                                                            <p class="item" :class="{active:item == quality}" 
                                                            v-for="item in qualityOpt"
                                                            @click="hdlQuality(item)">{{item}}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="btn txt speed pop-parent expandHover">
                                                    <p class="curr">{{playingVideoState.playbackRate}}X</p>
                                                    <div class="pop hc">
                                                        <div class="list">
                                                            <p class="item" :class="{active:item == playingVideoState.playbackRate}" 
                                                            v-for="item in speedOpt"
                                                            @click="hdlSpeed(item)">{{item}}X</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="btn volume hbc special-btn pop-parent expandHover" :class="{transActive:playingVideoState.muted}">
                                                    <div class="hbc hvc notransition" @click="hdlVolume">
                                                        <img src="img/play/volume-mute.png">
                                                        <img src="img/play/volume-mute1.png">
                                                    </div>
                                                    <div class="hbc notransition" @click="hdlVolume">
                                                        <img src="img/play/volume.png">
                                                        <img src="img/play/volume1.png">
                                                    </div>
                                                    <div class="pop hc block">
                                                        <p class="val">{{volumeVal}}%</p>
                                                        <div class="bar-box" @mousedown="volDown($event)" @mouseup="volUp($event)">
                                                            <div class="bar">
                                                                <div class="percent" ref="volumeRef">
                                                                    <p class="circle"></p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="btn full hbc special-btn" :class="{transActive:fullScreen}" @click="hdlFull">
                                                    <div class="dc notransition">
                                                        <img src="img/play/quit-full.png">
                                                        <img src="img/play/quit-full1.png">
                                                    </div>
                                                    <div class="dc hvc notransition">
                                                        <img src="img/play/full.png">
                                                        <img src="img/play/full1.png">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                            
                            <div class="btns flex flex-between">
                                <div class="this flex">
                                    <div class="btn hbc flex flex-align-items" @click="share">
                                        <div class="icon">
                                            <img src="img/common/comment.png">
                                            <img src="img/common/comment1.png">
                                        </div>
                                        分享
                                    </div>
                                    <div class="btn hbc flex flex-align-items pop-parent">
                                        <div class="icon">
                                            <img src="img/common/collect3.png">
                                            <img src="img/common/collect3-1.png">
                                        </div>
                                        收藏
                                        <div class="pop">
                                            <p>加入收藏</p>
                                        </div>
                                    </div>
                                    <div class="btn hbc flex flex-align-items" @click="share">
                                        <div class="icon">
                                            <img src="img/common/share2.png">
                                            <img src="img/common/share2-1.png">
                                        </div>
                                        分享
                                    </div>
                                </div>
                                <div class="other flex">
                                    <div class="btn hbc flex flex-align-items">
                                        <div class="icon">
                                            <img src="img/common/tv1.png">
                                            <img src="img/common/tv2.png">
                                            <p class="dot"></p>
                                        </div>
                                        畅享大屏体验
                                    </div>
                                    <div class="btn hbc flex flex-align-items">
                                        <div class="icon">
                                            <img src="img/common/download3.png">
                                            <img src="img/common/download.png">
                                        </div>
                                        客户端播放
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="rht series-box" :class="{net:ifNetOrder}">
                            <a href="info.html" target="_blank" class="name l2">{{info.name}}</a>
                            <div class="series-option flex">
                                <div class="btn cursor" :class="{active:sereisInd == 0}" @click="hdlSeries(0)">
                                    <p class="trapezoid"></p>
                                    <div class="t hvc flex flex-align-items">
                                        <div class="dc" v-if="sereisPalyingInd == 0">
                                            <img src="img/play/playing-icon.gif">    
                                            <img src="img/play/playing-icon1.gif">
                                        </div>剧集列表
                                    </div>
                                </div>
                                <div class="btn cursor" :class="{active:sereisInd == 1}" @click="hdlSeries(1)">
                                    <p class="trapezoid"></p>
                                    <div class="t hvc flex flex-align-items">
                                        <div class="dc" v-if="sereisPalyingInd == 1">
                                            <img src="img/play/playing-icon.gif">    
                                            <img src="img/play/playing-icon1.gif">
                                        </div>精彩看点
                                    </div>
                                </div>
                            </div>
                            <div class="tp flex flex-align-items flex-between">
                                <p>剧集列表 1-{{info.series}}</p>
                                <div class="hbc cursor" @click="hdlOrder">
                                    <div class="icon" v-if="ifNetOrder">
                                        <img src="img/common/order.png">
                                        <img src="img/common/order1.png">
                                    </div>
                                    <div class="icon" v-else>
                                        <img src="img/common/net-order.png">
                                        <img src="img/common/net-order1.png">
                                    </div>
                                </div>
                            </div>
                            <div class="list-contn">
                                <div :class="['list',ifNetOrder?'flex flex-wrap':'']">
                                    <template v-if="ifNetOrder">
                                        <div class="item mid cursor" v-for="number in mediaList.length" :class="{active:playingSeries == number}">
                                            <p class="hvc">{{number}}</p>
                                        </div>
                                    </template>
                                    <template v-else>
                                        <div class="nItm flex flex-align-items cursor" v-for="(item,i) in mediaList" :class="{active:sereisInd == i}">
                                            <p class="cover mid"><img :src="item.cover" class="fc"></p>
                                            <p class="l2 name">{{info.name}} 第{{item.no}}集</p>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
               <div class="information fluid">
                    <div class="flex">
                        <div class="lft">
                            <div class="info">
                                <div class="name flex">
                                    <a href="info.html" target="_blank" class="t flex">
                                        <div class="val">
                                            {{info.name}}
                                            <div class="flex more flex-align-items">
                                                更多信息<img src="img/common/arw1.png">
                                            </div>
                                        </div>
                                        <img src="img/common/arw2.png">
                                    </a>
                                    <p class="series">第1集</p>
                                </div>
                                <div class="score flex flex-align-items">
                                    <div class="num flex flex-align-items cursor">
                                        <img src="img/common/score.png"><p>{{info.score}}</p>
                                    </div>
                                    <p class="commented">(31.0k人已评)</p>
                                    <p class="dotted">•</p>
                                    <p class="toComment cursor">我要评分</p>
                                </div>
                                <div class="dtl flex flex-align-items">
                                    <div class="type flex" v-if="info.types.length">
                                        <p v-for="sItm in info.types" :class="{other:sItm.ifOther}">
                                            <span>{{sItm.val}}</span>
                                            <span v-if="sItm.ifOther">{{sItm.other}}</span>
                                        </p>
                                    </div>
                                    <div class="txt flex flex-align-items">
                                        <i></i>
                                        <p>{{info.age}}</p>
                                        <i></i>
                                        <p>{{info.year}}</p>
                                        <i></i>
                                        <p>{{info.series}}</p>
                                    </div>
                                </div>
                                <div class="tags flex flex-wrap">
                                    <p v-for="sItm in info.tags">{{sItm}}</p>
                                </div>
                                <div class="l2 introduce" :class="{all:introduceSeeAll}">
                                    <span class="lbl">描述：</span>
                                    <span class="">{{info.introduce}}</span>
                                    <div class="flip flex" @click="hdlSee">
                                        <div class="flex cursor">
                                            <p class="shadow"></p>
                                            <div class="t flex flex-align-items hbc">
                                                {{introduceSeeAll?'收合':'显示更多'}}
                                                <div class="icon">
                                                    <img src="img/common/arw5.png">
                                                    <img src="img/common/arw4.png">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swp star">
                                <div class="list-contain">
                                    <div class="list-box">
                                        <div class="list flex">
                                            <a href="actor.html" target="_blank" class="item cursor" 
                                            v-for="(sItm,s) in swp[0].list">
                                                <div class="mid avatar r50">
                                                    <img :src="sItm.url" class="fc">
                                                </div>
                                                <p class="l1 name">{{sItm.name}}</p>
                                                <p class="type">{{sItm.type}}</p>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="next cursor flip-btn vc" 
                                    v-if="swp[0].list.length > swp[0].row && swp[0].currPage != swp[0].pages"
                                    @click="flip('next',0)">
                                        <img src="img/common/arw2.png">
                                    </div>
                                    <div class="prev cursor flip-btn vc" 
                                    v-if="swp[0].currPage > 1"
                                    @click="flip('prev',0)">
                                        <img src="img/common/arw2.png">
                                    </div>
                                </div>
                            </div>
                            <div class="series-box" :class="{net:ifNetOrder}">
                                <div class="series-option flex">
                                    <div class="btn cursor" :class="{active:sereisInd == 0}" @click="hdlSeries(0)">
                                        <p class="trapezoid"></p>
                                        <div class="t hvc flex flex-align-items">
                                            <div class="dc" v-if="sereisPalyingInd == 0">
                                                <img src="img/play/playing-icon.gif">    
                                                <img src="img/play/playing-icon1.gif">
                                            </div>剧集列表
                                        </div>
                                    </div>
                                    <div class="btn cursor" :class="{active:sereisInd == 1}" @click="hdlSeries(1)">
                                        <p class="trapezoid"></p>
                                        <div class="t hvc flex flex-align-items">
                                            <div class="dc" v-if="sereisPalyingInd == 1">
                                                <img src="img/play/playing-icon.gif">    
                                                <img src="img/play/playing-icon1.gif">
                                            </div>精彩看点
                                        </div>
                                    </div>
                                </div>
                                <div class="box">
                                    <div class="tp flex flex-align-items flex-between">
                                        <p>剧集列表 1-{{mediaList.length}}</p>
                                        <div class="hbc cursor" @click="hdlOrder">
                                            <div class="icon" v-if="ifNetOrder">
                                                <img src="img/common/order.png">
                                                <img src="img/common/order1.png">
                                            </div>
                                            <div class="icon" v-else>
                                                <img src="img/common/net-order.png">
                                                <img src="img/common/net-order1.png">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="list-contn">
                                        <div :class="['list',ifNetOrder?'flex flex-wrap':'']">
                                            <template v-if="ifNetOrder">
                                                <div class="item mid cursor" v-for="number in mediaList.length" :class="{active:playingSeries == number}">
                                                    <p class="hvc">{{number}}</p>
                                                </div>
                                            </template>
                                            <template v-else>
                                                <div class="nItm flex flex-align-items cursor" v-for="(item,i) in mediaList" :class="{active:sereisInd == i}">
                                                    <p class="cover mid"><img :src="item.cover" class="fc"></p>
                                                    <p class="l2 name">{{info.name}} 第{{item.no}}集</p>
                                                </div>
                                            </template>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                            <div class="swp recormond">
                                <p class="ttl" style="margin-bottom: 0px;">{{swp[1].ttl}}</p>
                                <div class="list-contain">
                                    <div class="list-box">
                                        <div class="list flex">
                                            <div class="item cursor" 
                                            v-for="(sItm,s) in swp[1].list">
                                                <div class="mid cover">
                                                    <p class="fill" @click="toDtl(sItm)"></p>
                                                    <img :src="sItm.cover" class="fc">
                                                    <div class="series">
                                                        <p class="t l1">38集全</p>
                                                    </div>
                                                    <div class="right-top">TOP<span>10</span></div>
                                                    <a href="play.html" target="_blank" class="play-btn mid r50 btn hvc">
                                                        <img src="img/common/triangle.png" class="hvc">
                                                    </a>
                                                    <div class="collect mid r50 btn pop-parent expandHover">
                                                        <img src="img/common/collect.png" class="hvc">
                                                        <div class="pop">
                                                            <p>加入收藏</p>
                                                        </div>
                                                    </div>
                                                    
                                                </div>
                                                <div class="txt" @click="toDtl(sItm)">
                                                    <p class="name l2">{{sItm.name}}</p>
                                                </div>     
                                            </div>
                                        </div>
                                    </div>
                                    <div class="next cursor flip-btn vc" 
                                    v-if="swp[1].list.length > swp[1].row && swp[1].currPage != swp[1].pages"
                                    @click="flip('next',1)">
                                        <img src="img/common/arw2.png">
                                    </div>
                                    <div class="prev cursor flip-btn vc" 
                                    v-if="swp[1].currPage > 1"
                                    @click="flip('prev',1)">
                                        <img src="img/common/arw2.png">
                                    </div>
                                </div>
                            </div>
                            <div class="rank">
                                <p class="ttl">电视剧排行榜</p>
                                <div class="list flex flex-wrap">
                                    <a href="info.html" target="_blank" class="item l1" 
                                    v-for="(item,i) in rank" 
                                    :class="[{top3:i < 3},{active:!i}]"
                                    @mouseenter="hover(i,$event)"
                                    @mouseleave="leave(i,$event)">
                                        <span class="num">{{i + 1}}</span>{{item.name}}
                                        <div class="mid pic">
                                            <img :src="item.cover" class="fc">
                                        </div>
                                    </a>
                                </div>
                            </div>
                            <div class="comments">
                                <p class="ttl">{{comments.length}} 评论</p>
                                <div class="list">
                                    <div class="item flex me">
                                        <div class="avatar">
                                            <p class="mid r50">
                                                <img src="img/common/unLog.png" class="fc">
                                            </p>
                                        </div>
                                        <div class="right">
                                            <div class="unLog flex flex-align-items flex-justify-content">
                                                写评论<p class="btn iv cursor base-btn">登录</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="item flex" v-for="item in comments">
                                        <div class="avatar">
                                            <p class="mid r50">
                                                <img :src="item.avatar" class="fc" v-if="item.avatar">
                                                <img :src="item.sex == 0?'img/common/girl.jpg':'img/common/boy.jpg'" class="fc" v-else>
                                            </p>
                                        </div>
                                        <div class="right">
                                            <p class="name">
                                                {{item.nickname?item.nickname:('User' + item.id)}} ·
                                                <span class="when"> 1天</span>
                                            </p>
                                            <div class="content">{{item.text}}</div>
                                            <div class="flex act">
                                                <div class="btn flex flex-align-items hbc notransition">
                                                    <div class="icon">
                                                        <img src="img/common/like.png">
                                                        <img src="img/common/like1.png">
                                                    </div>
                                                    点赞
                                                </div>
                                                <div class="btn flex flex-align-items hbc notransition">
                                                    <div class="icon">
                                                        <img src="img/common/comment.png">
                                                        <img src="img/common/comment1.png">
                                                    </div>
                                                    回复
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="load-box" v-if="commentsLoading">
                                    <p class="load"></p>
                                </div>
                                <div class="load-more flex flex-justify-content flex-align-items cursor" v-else
                                 @click="loadMore">
                                    加载更多<img src="img/common/arw4.png">
                                </div>
                            </div>
                        </div>
                        <div class="rht">
                            <div class="rank">
                                <p class="ttl">电视剧排行榜</p>
                                <div class="list">
                                    <a href="info.html" target="_blank" class="item l1" 
                                    v-for="(item,i) in rank" 
                                    :class="[{top3:i < 3},{active:!i}]"
                                    @mouseenter="hover(i,$event)"
                                    @mouseleave="leave(i,$event)">
                                        <span class="num">{{i + 1}}</span>{{item.name}}
                                        <div class="mid pic">
                                            <img :src="item.cover" class="fc">
                                        </div>
                                        
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
               </div>
             
            </main>
        </template>
        
        
        <script src="js/common/swiper.js"></script>
        <script src="js/common/jquery.js"></script>
        <script src="js/common/dataUrl.js"></script>
        <script>
            let hls = null;
            Vue.use(httpVueLoader);
            var contn = new Vue({
                el:'#contn',
                data:{
                   
                },
                methods:{
                    share(obj){
                        this.$refs.shareRef.hdlShow('img/info/s1.jpg');
                    },
                    addNotice(msg,type){
                        console.log(msg,type);
                        this.$refs.noticeRef.add({
                            msg:msg,
                            type:type,
                            time:new Date().getTime()
                        });
                    },
                },
                mounted:function(){
                    ifMounted = true;
                },
                components:{
                    'v-header': 'url:./js/common/v-header.vue',
                    'v-footer': 'url:./js/common/v-footer.vue',
                    'v-notice': 'url:./js/common/v-notice.vue',
                    'v-side': 'url:./js/common/v-side.vue',
                    'v-share': 'url:./js/common/v-share.vue',
                    vMain:{
                        template: '#vMain',
                        data:function(){
                            return{
                                
                                info:{
                                    name:'一笑隋哥',
                                    cover:'img/index/s4.jpg',
                                    types:[
                                        {val:'TOP1',ifOther:true,other:'热播榜'},
                                        {val:'独播'},
                                    ],
                                    score:'9.8',
                                    age: '13+',
                                    year: '2023',
                                    series: 86,
                                    seriesAll: true,
                                    tags:['中国大陆','战争','古装'],
                                    actors:[
                                        {name:'李沁'},
                                        {name:'陈哲远'},
                                    ],
                                    producers:[
                                        {name:'朱锐斌'},
                                        {name:'蓝志伟'},
                                    ],
                                    introduce:'《一笑随歌》是由朱锐斌（《香蜜沉沉烬如霜》、《宁安如梦》）、蓝志伟（《白月梵星》）、古志威（《宁安如梦》）执导，李沁（《追风者》、《七夜雪》、《爱上特种兵》）、陈哲远（《我的反派男友》、《暗夜与黎明》、《白色橄榄树》）、夏梦（《战火中的青春》）、陈鹤一（《九霄寒夜暖》）主演的古装爱情剧。 该剧讲述了平陵一战锦绣国败军之际，红衣女射手付一笑惊天一箭射中夙砂大皇子凤随歌，扭转了战局胜败。但付一笑却在平陵一战后不久，意外坠崖，记忆全失。一笑被悬壶济世的正念山庄凌家所救，却在此处意外与宿敌凤随歌再次重逢。看着如此狼狈的付一笑。凤随歌直觉此事定与自己在平陵一战中的遭遇脱不开关系。凤随歌想要利用付一笑找到幕后真相，而付一笑亦要利用凤随歌在重重追杀之下，为自己保命。于是一月前还是死敌的二人，此刻必须互为依靠，在波谲云诡的玉京城中杀出生路，而爱情亦在无数次生死一刻间悄然生长。前因已经种下，仇恨、辜负、欺骗、求不得、放不下，人人是执棋者，亦为盘上棋子。付一笑与凤随歌只能在风波中紧紧携手，共同破除黑暗阴谋，击碎命运枷锁，不负苍生，亦不负卿。 本剧将在爱奇艺国际站（ iNEWU.com）在线播出。'
                                },
                                series:[
                                    {no:'1',cover:'img/info/s1.jpg'},
                                    {no:'2',cover:'img/info/s2.jpg'},
                                    {no:'3',cover:'img/info/s3.jpg'},
                                    {no:'4',cover:'img/info/s4.jpg'},
                                    {no:'5',cover:'img/info/s5.jpg'},
                                    {no:'6',cover:'img/info/s6.jpg'},
                                ],
                                clip:[
                                    {name:'EP34 凤戏阳险些杀了夏静石',cover:'img/info/j1.jpg'},
                                    {name:'EP34 凤戏阳险些杀了夏静石',cover:'img/info/j2.jpg'},
                                    {name:'EP34 凤戏阳险些杀了夏静石',cover:'img/info/j1.jpg'},
                                    {name:'EP34 凤戏阳险些杀了夏静石',cover:'img/info/j2.jpg'},
                                    {name:'EP34 凤戏阳险些杀了夏静石',cover:'img/info/j1.jpg'},
                                    {name:'EP34 凤戏阳险些杀了夏静石',cover:'img/info/j2.jpg'},
                                ],
                                mediaList:[
                                    {no:'1',cover:'img/info/s1.jpg'},
                                    {no:'2',cover:'img/info/s2.jpg'},
                                    {no:'3',cover:'img/info/s3.jpg'},
                                    {no:'4',cover:'img/info/s4.jpg'},
                                    {no:'5',cover:'img/info/s5.jpg'},
                                    {no:'6',cover:'img/info/s6.jpg'},
                                ],
                                playingSeries:1,
                                years:[],
                                sereisInd:0,
                                sereisPalyingInd:0,
                                ifNetOrder:true,
                                swp:[
                                    
                                    {
                                        row:7,
                                        rowAry:[7,6,4,4],
                                        gap:30,
                                        gapAry:[30,34,24,28],
                                        ttl:'人气明星',
                                        type:'star',
                                        list:[
                                            {name:'陈哲远',url:'img/index/a1.jpg',type:'导演'},
                                            {name:'李沁',url:'img/index/a2.jpg',type:'导演'},
                                            {name:'陈鹤一',url:'img/index/a3.jpg',type:'导演'},
                                            {name:'陈哲远',url:'img/index/a1.jpg',type:'主演'},
                                            {name:'李沁',url:'img/index/a2.jpg',type:'主演'},
                                            {name:'陈鹤一',url:'img/index/a3.jpg',type:'主演'},
                                            {name:'陈哲远',url:'img/index/a1.jpg',type:'主演'},
                                            {name:'李沁',url:'img/index/a2.jpg',type:'主演'},
                                            {name:'陈鹤一',url:'img/index/a3.jpg',type:'主演'},
                                            {name:'陈哲远',url:'img/index/a1.jpg',type:'主演'},
                                            {name:'李沁',url:'img/index/a2.jpg',type:'主演'},
                                            {name:'陈鹤一',url:'img/index/a3.jpg',type:'主演'},
                                            {name:'陈哲远',url:'img/index/a1.jpg',type:'主演'},
                                            {name:'李沁',url:'img/index/a2.jpg',type:'主演'},
                                            {name:'陈鹤一',url:'img/index/a3.jpg',type:'主演'},
                                            {name:'陈哲远',url:'img/index/a1.jpg',type:'主演'},
                                            {name:'李沁',url:'img/index/a2.jpg',type:'主演'},
                                            {name:'陈鹤一',url:'img/index/a3.jpg',type:'主演'},
                                        ],
                                    },
                                    {
                                        row:6,
                                        rowAry:[6,4,3,3],
                                        ttl:'猜你喜欢',
                                        list:[
                                            {name:'与晋长安',cover:'img/index/cover.png'},
                                            {name:'与晋长安',cover:'img/index/1.jpg'},
                                            {name:'与晋长安',cover:'img/index/2.jpg'},
                                            {name:'与晋长安',cover:'img/index/3.jpg'},
                                            {name:'与晋长安',cover:'img/index/4.jpg'},
                                            {name:'与晋长安',cover:'img/index/5.jpg'},
                                            {name:'与晋长安',cover:'img/index/6.jpg'},
                                            {name:'与晋长安',cover:'img/index/7.jpg'},
                                            {name:'与晋长安',cover:'img/index/8.jpg'},
                                            {name:'与晋长安',cover:'img/index/9.jpg'},
                                            {name:'与晋长安',cover:'img/index/10.jpg'},
                                            {name:'与晋长安',cover:'img/index/11.jpg'},
                                            {name:'与晋长安',cover:'img/index/12.jpg'},
                                            {name:'与晋长安',cover:'img/index/13.jpg'},
                                            {name:'与晋长安',cover:'img/index/14.jpg'},
                                        ],
                                    },
                                ],
                                dly:null,
                                introduceSeeAll:false,
                                sizeRange:[1680,1024,768,0],
                                rank:[
                                    {name:'与晋长安',cover:'img/index/1.jpg'},
                                    {name:'与晋长安',cover:'img/index/2.jpg'},
                                    {name:'与晋长安',cover:'img/index/3.jpg'},
                                    {name:'与晋长安',cover:'img/index/4.jpg'},
                                    {name:'与晋长安',cover:'img/index/5.jpg'},
                                    {name:'与晋长安',cover:'img/index/6.jpg'},
                                    {name:'与晋长安',cover:'img/index/7.jpg'},
                                    {name:'与晋长安',cover:'img/index/8.jpg'},
                                    {name:'与晋长安',cover:'img/index/9.jpg'},
                                    {name:'与晋长安',cover:'img/index/10.jpg'},
                                ],
                                comments:[
                                    {nickname:'',id:'jio3j1234',avatar:'',sex:0,text:'内容内容内容内容内容内容内容内容内容'},
                                    {nickname:'niko',id:'jio3j1234',avatar:'img/play/avatar.png',sex:0,text:'内容内容内容内容内容内容内容内容内容'},
                                    {nickname:'',id:'jio3j1234',avatar:'img/play/avatar.png',sex:0,text:'内容内容内容内容内容内容内容内容内容'},
                                    {nickname:'jack',id:'jio3j1234',avatar:'',sex:1,text:'内容内容内容内容内容内容内容内容内容'},
                                    {nickname:'',id:'jio3j1234',avatar:'',sex:1,text:'内容内容内容内容内容内容内容内容内容'},
                                    {nickname:'',id:'jio3j1234',avatar:'img/play/avatar.png',sex:0,text:'内容内容内容内容内容内容内容内容内容'},
                                    {nickname:'alice',id:'jio3j1234',avatar:'img/play/avatar.png',sex:0,text:'内容内容内容内容内容内容内容内容内容'},
                                    {nickname:'zgw',id:'jio3j1234',avatar:'',sex:0,text:'内容内容内容内容内容内容内容内容内容'},
                                    {nickname:'',id:'jio3j1234',avatar:'img/play/avatar.png',sex:0,text:'内容内容内容内容内容内容内容内容内容'},
                                ],
                                commentsLoading:false,
                                playingVideoState:{},
                                whetherHours:false,
                                inited:false,
                                playingPercent:0,
                                autoJumpStart:false,
                                quality:'480P',
                                qualityOpt:['1080P','720P','480P'],
                                speedOpt:['2','1.5','1.25','1','0.75'],
                                volumeDragging:false,
                                progressDragging:false,                                
                                dragVolume:0,
                                //记录静音前使用的音量
                                tempVolume:0,
                                fullScreen:false,
                                //播放状态标签去除active延时器
                                playStatusDly:null,
                                currStatusClass:'icon',
                                volumeVal:0,
                                jumpTxtDly:null,
                                // img/play/video.mp4
                                // videoUrl:'',
                                showControlDly:null,
                                touchStart:{},
                                mobileDragging:false,
                            }
                        },
                        watch: {
                            playingVideoState(newValue, oldValue){
                                if(!this.inited){
                                    this.inited = true;
                                    this.whetherHours = (newValue.duration / 3600) >= 1?true:false;
                                    console.log(this.whetherHours);
                                }
                            }
                        },
                        methods:{
                           
                            hdlSee(){
                                this.introduceSeeAll = !this.introduceSeeAll;
                            },
                          
                            writingWeb(){
                                var This = this;
                            },
                            share(){
                                this.$emit('call-share');
                            },
                            toDtl(row){
                                window.open("info.html", "_blank");
                            },
                            hover(ind){
                                $('main .information .rank .item').removeClass('active');
                                $('main .information .lft .rank .item').eq(ind).addClass('active');
                                $('main .information .rht .rank .item').eq(ind).addClass('active');
                            },
                            leave(ind){
                                $('main .information .rank .item').removeClass('active');
                                $('main .information .lft .rank .item').eq(0).addClass('active');
                                $('main .information .rht .rank .item').eq(0).addClass('active');
                            },
                            
                            handleResize() {
                                let ary = newObj(this.swp);
                                let This = this;
                                ary.forEach(item => {
                                    
                                    for(var r = 0;r < This.sizeRange.length;r++){
                                        if(window.innerWidth >= This.sizeRange[r]){
                                            item.row = item.rowAry[r];
                                            if(item.type == 'star'){
                                                item.gap = item.gapAry[r];
                                            }else{
                                                item.gap = 16;
                                            }  
                                            if(window.innerWidth < 768){
                                                item.gap = 8;
                                            }
                                            break;
                                        }
                                    } 
                                    
                                    
                                    
                                });
                                this.swp = ary;
                                this.init();
                                $(`main .swp .list-box`).removeClass('active');
                                $(`main .swp .list`).css('transform','');
                                
                                console.log('当前窗口宽度:', window.innerWidth)
                            },
                            init(){
                                let ary = newObj(this.swp);
                                let This = this;
                                ary.forEach(item => {
                                    item.currPage = 1;
                                    item.pages = Math.ceil(item.list.length / item.row);
                                    item.intPage = item.list.length % item.row || true;
                                });
                                console.log(ary);
                                this.swp = ary;
                            },
                            flip(type,ind){
                                console.log($(`main .swp:eq(${ind})`));
                                let ary = newObj(this.swp);
                                let rowW = $(`main .swp:eq(${ind}) .list .item`)[0].offsetWidth + ary[ind].gap;
                                let distance;
                                if(type == 'next'){
                                    $(`main .swp:eq(${ind}) .list-box`).addClass('active');
                                    ary[ind].currPage++;
                                }else{
                                    ary[ind].currPage--
                                }
                                if(ary[ind].currPage == ary[ind].pages && ary[ind].intPage !== true){
                                    console.log('最后，非整数页')
                                    distance = rowW * ary[ind].row * (ary[ind].pages - 2) + rowW * ary[ind].intPage;
                                }else{
                                    distance = rowW * ary[ind].row * (ary[ind].currPage - 1);
                                }
                                console.log(rowW,ary[ind],distance);
                                $(`main .swp:eq(${ind}) .list`).css('transform',`translateX(-${distance}px)`);
                                if(!ind){
                                    $(`main .swp:eq(${ind}) .history`).css('transform',`translateX(-${distance}px)`); 
                                }
                                this.swp = ary;
                            },
                            hdlSeries(ind){
                                this.sereisInd = ind;
                            },
                            hdlOrder(){
                                this.ifNetOrder = !this.ifNetOrder;
                            },
                            loadMore(){
                                if(this.commentsLoading) return false;
                                var This = this;    
                                this.commentsLoading = true;
                                setTimeout(()=>{
                                    This.commentsLoading = false;
                                },1500)
                            },
                            move(e){
                                let progressPos = $('main .play-box .lft .video-box .controls-box .progress-box')[0].getBoundingClientRect();
                                $('main .play-box .lft .video-box .controls-box .progress-box .light-line').css('left',`${e.clientX - progressPos.left}px`)
                            },
                            hdlEnter(e){
                                // console.log(e);
                                this.move(e);
                            },
                            hdlMove(e){
                                // console.log(e);
                                this.move(e);
                            },
                            //移动端快进
                            handleTouchStart(event){
                                console.log(event);
                                if (event.touches.length === 1) {
                                    this.mobileDragging = true;    
                                    let progressWidth = this.$refs.progressMobileRef.parentNode.offsetWidth;
                                    this.updtProgressMobile(event.touches[0].clientX - this.$refs.progressMobileRef.parentNode.getBoundingClientRect().left,'start');
                                    this.touchStart = {
                                        clientX:event.touches[0].clientX,
                                        valBefore:this.$refs.progressMobileRef.offsetWidth
                                    };
                                    console.log(this.touchStart);
                                }
                            },
                            handleTouchMove(event){
                                if (event.touches.length === 1) {
                                    let val = this.touchStart.valBefore + event.touches[0].clientX - this.touchStart.clientX;
                                    this.updtProgressMobile(val,'move');
                                }
                            },
                            handleTouchEnd(event){
                                console.log(event);
                                if (this.mobileDragging) {
                                    console.log(event.changedTouches[0].clientX);
                                    let progressWidth = this.$refs.progressMobileRef.parentNode.offsetWidth;
                                    this.updtProgressMobile(event.changedTouches[0].clientX - this.$refs.progressMobileRef.parentNode.getBoundingClientRect().left,'end');
                                }
                                
                            },
                            updtProgressMobile(val,actType){
                                let progressWidth = this.$refs.progressMobileRef.parentNode.offsetWidth;
                                if(val < 0){
                                    val = 0;
                                }else if(val > progressWidth){
                                    val = progressWidth;
                                }
                                let percent = val / progressWidth;
                                if(actType != 'move'){
                                    $('main .play-box .lft .video-box video')[0].currentTime = this.playingVideoState.duration * percent;
                                }
                                this.$refs.progressMobileRef.style.width = `${percent * 100}%`;
                                if(actType == 'end'){
                                    this.mobileDragging = false;
                                }
                            },
                            hdlVidClick(){
                                if(mobileDevice){
                                    this.hdlShowControl();
                                }else{
                                    this.hdlPause();
                                }
                            },
                            watchPlayingVideo() {
                                const playingVideo = $('main .play-box .lft .video-box video')[0];
                                this.playingVideoState = {
                                    playing: playingVideo.paused ? false : true,
                                    currentTime: playingVideo.currentTime,
                                    duration: playingVideo.duration,
                                    ended: playingVideo.ended,
                                    volume: playingVideo.muted?0:(parseInt(playingVideo.volume * 100)),
                                    muted: playingVideo.muted,
                                    playbackRate:playingVideo.playbackRate,
                                };
                                if(!this.mobileDragging){
                                    this.playingPercent = playingVideo.currentTime / playingVideo.duration * 100;
                                }
                                // console.log('视频状态更新:', this.playingVideoState);
                            },
                            hdlShowControl(){
                                clearTimeout(this.showControlDly);
                                $('main .play-box .lft .video-box').addClass('showControl');
                                if(mobileDevice){
                                    $('main .play-box .lft .video-box .status').addClass('active');
                                }
                                this.showControlDly = setTimeout(()=>{
                                    $('main .play-box .lft .video-box').removeClass('showControl');
                                    if(mobileDevice){
                                        $('main .play-box .lft .video-box .status').removeClass('active');
                                    }
                                },4000);
                            },
                            hdlPause(){
                                clearTimeout(this.playStatusDly);
                                if(this.playingVideoState.playing){
                                    $('main .play-box .lft .video-box video')[0].pause();
                                }else{
                                    $('main .play-box .lft .video-box video')[0].play();
                                }                                
                                $('main .play-box .lft .video-box .status').attr('class',`status hvc mid r50 noTouch ${this.currStatusClass}`);
                                $('main .play-box .lft .video-box .status').addClass('active');
                                $('main .play-box .lft .video-box .status').addClass('play');
                                this.playStatusDly = setTimeout(()=>{
                                    $('main .play-box .lft .video-box .status').attr('class',`status hvc mid r50 noTouch ${this.currStatusClass}`);
                                },1500)
                            },
                            formatTime(seconds){
                                const hours = Math.floor(seconds / 3600);
                                const minutes = Math.floor((seconds % 3600) / 60);
                                const secs = seconds % 60;
                                
                                // 使用 padStart 确保每个部分都是两位数
                                const formattedHours = String(parseInt(hours)).padStart(2, '0');
                                const formattedMinutes = String(parseInt(minutes)).padStart(2, '0');
                                const formattedSeconds = String(parseInt(secs)).padStart(2, '0');

                                if (hours > 0  || this.whetherHours) {
                                    return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
                                } else {
                                    return `${formattedMinutes}:${formattedSeconds}`;
                                }
                            },
                            prevOrNext(type){
                                clearTimeout(this.playStatusDly);
                                let currentTime = this.playingVideoState.currentTime;
                                console.log(type);
                                if(type == 'prev'){
                                    currentTime -= 10;
                                    currentTime < 0 && (currentTime = 0);
                                }else{
                                    currentTime += 10;
                                    currentTime > this.playingVideoState.duration && (currentTime = this.playingVideoState.duration);
                                }
                                $('main .play-box .lft .video-box video')[0].currentTime = currentTime;
                                $('main .play-box .lft .video-box video')[0].play();
                                $('main .play-box .lft .video-box .status').attr('class',`status hvc mid r50 noTouch ${this.currStatusClass}`);
                                $('main .play-box .lft .video-box .status').addClass('active');
                                $('main .play-box .lft .video-box .status').addClass(`fast${type == 'prev'?' prev':''}`);
                                this.playStatusDly = setTimeout(()=>{
                                    $('main .play-box .lft .video-box .status').attr('class',`status hvc mid r50 noTouch ${this.currStatusClass}`);
                                },1500)
                            },
                            jumpStart(){
                                this.autoJumpStart = !this.autoJumpStart;
                                $('main .play-box .lft .video-box .controls-box .other .turn').addClass('disappear');
                                clearTimeout(this.jumpTxtDly);
                                $('main .play-box .lft .video-box .controls-box .jump-txt').addClass('active');
                                let This = this;
                                this.jumpTxtDly = setTimeout(()=>{
                                    This.jumpTxtHide();
                                },3000)
                            },
                            jumpLeave(){
                                $('main .play-box .lft .video-box .controls-box .other .turn').removeClass('disappear');
                            },
                            jumpTxtHide(){
                                $('main .play-box .lft .video-box .controls-box .jump-txt').removeClass('active');
                            },
                            hdlVolume(){
                                $('main .play-box .lft .video-box video')[0].muted = !this.playingVideoState.muted;
                                let volumeHeight = this.$refs.volumeRef.parentNode.offsetHeight;
                                //初次取消静音 音量默认为1
                                if(!$('main .play-box .lft .video-box video')[0].muted){
                                    this.calcVolumePercent(!this.tempVolume?volumeHeight:this.dragVolume);
                                }else{
                                    this.volumeVal = 0;
                                    this.$refs.volumeRef.style.height = '0px';
                                    console.log(this.tempVolume);
                                }
                            },
                            hdlVoice(type){
                                let volume = $('main .play-box .lft .video-box video')[0].volume;
                                
                                if(type == 'reduce'){
                                    volume -= .05;
                                    if(volume <= 0){
                                        this.hdlVolume();
                                        return false;
                                    }
                                }else{
                                    volume += .05;
                                    volume > 1 && (volume = 1);
                                }
                                console.log(volume)
                                this.updtVolume(volume);
                            },
                            hdlQuality(val){
                                this.quality = val;
                            },
                            hdlSpeed(val){
                                $('main .play-box .lft .video-box video')[0].playbackRate = val;
                            },
                            volDown(event){
                                this.volumeDragging = true;
                                var event = event || window.event;
                                var This = this;
                                let volStart = event.clientY;
                                console.log('volStart',volStart)
                                let volumeHeight = This.$refs.volumeRef.parentNode.offsetHeight;
                                this.calcVolumePercent(volumeHeight + This.$refs.volumeRef.parentNode.getBoundingClientRect().top - volStart)
                                let valBefore = This.$refs.volumeRef.offsetHeight;
                                
                                if(this.volumeDragging){
                                    document.onmousemove = function(event1){
                                        var event11 = event1 || window.event;
                                        let val = valBefore + (volStart - event11.clientY);
                                        
                                        This.calcVolumePercent(val);
                                    }
                                }
                                
                            },
                            calcVolumePercent(val){
                                let volumeHeight = this.$refs.volumeRef.parentNode.offsetHeight;
                                if(val < 0){
                                    val = 0;
                                }else if(val > volumeHeight){
                                    val = volumeHeight;
                                }
                                console.log(val);
                                let percent = val / volumeHeight;
                                this.updtVolume(percent);
                            },
                            updtVolume(percent){
                                let volumeHeight = this.$refs.volumeRef.parentNode.offsetHeight;
                                $('main .play-box .lft .video-box video')[0].volume = percent;
                                $('main .play-box .lft .video-box video')[0].muted = percent?false:true;
                                this.tempVolume = parseInt(percent * 100);
                                this.volumeVal = parseInt(percent * 100);
                                this.dragVolume = volumeHeight * percent;
                                console.log(percent,volumeHeight,this.dragVolume);
                                // this.$refs.volumeRef.style.height = `${this.dragVolume}px`;
                                this.$refs.volumeRef.style.height = `${this.volumeVal}%`;
                            },
                            volUp(){
                                this.volumeDragging = false;
                                document.onmousemove = null;                                
                                // obj.muted = obj.volume?false:true;
                            },
                            progressDown(event){
                                this.volumeDragging = true;
                                var event = event || window.event;
                                var This = this;
                                let startX = event.clientX;
                                let progressWidth = This.$refs.progressRef.parentNode.offsetWidth;
                                this.updtProgress(startX - This.$refs.progressRef.parentNode.getBoundingClientRect().left)
                                let valBefore = This.$refs.progressRef.offsetWidth;
                                if(this.volumeDragging){
                                    document.onmousemove = function(event1){
                                        var event11 = event1 || window.event;
                                        let val = valBefore + event11.clientX - startX;
                                        
                                        This.updtProgress(val);
                                    }
                                }
                                
                            },
                            updtProgress(val){
                                let progressWidth = this.$refs.progressRef.parentNode.offsetWidth;
                                if(val < 0){
                                    val = 0;
                                }else if(val > progressWidth){
                                    val = progressWidth;
                                }
                                let percent = val / progressWidth;
                                $('main .play-box .lft .video-box video')[0].currentTime = this.playingVideoState.duration * percent;
                                this.$refs.progressRef.style.width = `${percent * 100}%`;
                            },
                            progressUp(){
                                this.progressDragging = false;
                                document.onmousemove = null;                                
                                // obj.muted = obj.volume?false:true;
                            },
                            hdlFull(){
                                this.fullScreen = !this.fullScreen;
                                if(!mobileDevice){
                                    if(this.fullScreen){
                                        $('body').addClass('full');
                                    }else{
                                        $('body').removeClass('full');
                                    }
                                }else{
                                    let video = $('main .play-box .lft .video-box video')[0];
                                    if(this.fullScreen){
                                        if (video.requestFullscreen) {
                                            video.requestFullscreen(); // 标准方法
                                        } else if (video.webkitRequestFullscreen) {
                                            video.webkitRequestFullscreen(); // Safari
                                        } else if (video.msRequestFullscreen) {
                                            video.msRequestFullscreen(); // IE/Edge
                                        } else {
                                            alert("您的浏览器不支持全屏 API");
                                        }
                                    }
                                    
                                }
                                
                                
                            },
                            loadVideo(){
                                const fileId = '23';
                                const resolution = this.quality.toLowerCase();
                                if (!fileId) {
                                    this.$emit('call-add-notice',
                                    '错误: 请输入文件ID',
                                    'error');
                                    return;
                                }

                                if (!dataUrl) {
                                    updateStatus('错误: 请输入API基础URL');
                                    return;
                                }

                                // 停止当前播放
                                if (hls) {
                                    hls.destroy();
                                    hls = null;
                                }

                                // 构建视频URL
                                let videoUrl;
                                if (resolution) {
                                    // 直接使用指定分辨率的播放列表
                                    // videoUrl = `${dataUrl}/manage/file/preview/hls/public/${fileId}/${resolution}/index.m3u8`;
                                    videoUrl = 'https://oss.zhiwang.moyoz.cc/%E9%87%91%E6%89%8B%E6%8C%87_hls/master.m3u8';
                                    console.log(videoUrl);
                                } else {
                                    // 使用主播放列表（自动选择分辨率）
                                    videoUrl = `${dataUrl}/manage/file/preview/hls/public/${fileId}/master.m3u8`;
                                }

                                this.$emit('call-add-notice','正在加载视频...');
                                console.log(videoUrl);

                                if (Hls.isSupported()) {
                                    console.log('Hls支持');
                                    hls = new Hls({
                                        debug: false,
                                        enableWorker: false,
                                        lowLatencyMode: true,
                                        backBufferLength: 90
                                    });

                                    hls.loadSource(videoUrl);
                                    hls.attachMedia(videoPlayer);

                                    hls.on(Hls.Events.MANIFEST_PARSED, function(event, data) {
                                        console.log('解析:', data);
                                        console.log(`视频加载成功!\n可用分辨率: ${hls.levels.map(level => level.height + 'p').join(', ')}`);
                                        videoPlayer.play().catch(e => {
                                            console.log(`自动播放被阻止: ${e.message}\n请手动点击播放按钮`);
                                        });
                                    });

                                    hls.on(Hls.Events.ERROR, function(event, data) {
                                        if (data.fatal) {
                                            let errorMsg = `HLS错误: ${data.type} - ${data.details}`;
                                            console.log(errorMsg);

                                            switch(data.details) {
                                                case Hls.ErrorDetails.MANIFEST_LOAD_ERROR:
                                                    console.log('错误: 无法加载播放列表，请检查文件ID和URL');
                                                    break;
                                                case Hls.ErrorDetails.MANIFEST_LOAD_TIMEOUT:
                                                    console.log('错误: 播放列表加载超时');
                                                    break;
                                                case Hls.ErrorDetails.MANIFEST_PARSING_ERROR:
                                                    console.log('错误: 播放列表解析错误');
                                                    break;
                                                case Hls.ErrorDetails.LEVEL_LOAD_ERROR:
                                                    console.log('错误: 分辨率加载错误');
                                                    break;
                                                case Hls.ErrorDetails.LEVEL_LOAD_TIMEOUT:
                                                    console.log('错误: 分辨率加载超时');
                                                    break;
                                                case Hls.ErrorDetails.FRAG_LOAD_ERROR:
                                                    console.log('错误: 分片加载错误');
                                                    break;
                                                default:
                                                    console.log(`未知错误: ${data.details}`);
                                                    break;
                                            }
                                        }
                                    });

                                    hls.on(Hls.Events.LEVEL_SWITCHED, function(event, data) {
                                        const level = hls.levels[data.level];
                                        console.log(level);
                                        updateStatus(`切换到分辨率: ${level.height}p, 码率: ${Math.round(level.bitrate/1000)} kbps`);
                                    });

                                } else if (videoPlayer.canPlayType('application/vnd.apple.mpegurl')) {
                                    // 原生HLS支持 (Safari)
                                    videoPlayer.src = videoUrl;
                                    videoPlayer.addEventListener('loadedmetadata', function() {
                                        updateStatus('视频加载成功 (原生HLS支持)');
                                        videoPlayer.play();
                                    });
                                } else {
                                    updateStatus('错误: 您的浏览器不支持HLS播放');
                                }
                            },
                            handleFullscreenChange() {
                                if (!document.fullscreenElement && !document.webkitFullscreenElement) {
                                    console.log('已退出全屏');
                                    this.fullScreen = false;
                                } else {
                                    console.log('进入全屏');
                                }
                            },
                        },
                        beforeDestroy() {
                        },
                        mounted:function(){
                            var This = this;
                            this.writingWeb();
                            const playingVideo = $('main .play-box .lft .video-box video')[0];
                            playingVideo.addEventListener('play', this.watchPlayingVideo);
                            playingVideo.addEventListener('pause', this.watchPlayingVideo);
                            playingVideo.addEventListener('ended', this.watchPlayingVideo);
                            playingVideo.addEventListener('timeupdate', this.watchPlayingVideo);
                            document.addEventListener('fullscreenchange', this.handleFullscreenChange);
                            document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange); // iOS Safari
                            document.addEventListener('mozfullscreenchange', this.handleFullscreenChange);
                            document.addEventListener('MSFullscreenChange', this.handleFullscreenChange);

                            document.onmouseup = function(){
                                console.log('mouseup')
                                This.volUp();
                                This.progressUp();
                            }

                            document.onkeydown = function(e){
                                console.log(e);
                                let keyAry = [32,37,39,38,40];
                                if(keyAry.indexOf(e.keyCode) >= 0){
                                    e.preventDefault(); // 阻止浏览器保存页面的默认行为
                                    if (e.keyCode == 32) {This.hdlPause();}
                                    if (e.keyCode == 37) {This.prevOrNext('prev');}
                                    if (e.keyCode == 39) {This.prevOrNext('next');}
                                    if (e.keyCode == 38) {This.hdlVoice('add');}
                                    if (e.keyCode == 40) {This.hdlVoice('reduce');}
                                }
                                
                            }
                            setTimeout(()=>{
                                This.loadVideo();
                            },1000)
                            
                            
                        }
                    },
                },
            })
            
        </script>
        <script src="js/common/common.js"></script>
        <script src="js/common/animation.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>